<template>
  <div>
    <el-container class="e-container">
      <!-- 左侧订单产品列表面板 -->
      <el-container>
        <el-header class="el-header" style="height: 160px">
          <span>订单列表</span>
        </el-header>
        <el-main class="e-main">
          <el-table :data="tableData">
            <el-table-column
              prop="image"
              label="产品图片"
              width="200"
              height="200"
            >
              <el-image
                style="width: 150px; height: 150px"
                :src="require('@/assets/img/img01.jpg')"
              ></el-image>
            </el-table-column>
            <el-table-column prop="product_name" label="产品名称" width="450">
            </el-table-column>
            <el-table-column prop="product_price" label="产品价格" width="200">
            </el-table-column>
            <el-table-column prop="num" label="产品数量" width="200">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  class="remove_btn"
                  @click.native.prevent="removeList(scope.$index, tableData)"
                  type="success"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
      <!-- 右侧订单结算面板 -->
      <el-aside class="aside" style="width: 400px">
        <el-row>
          <!-- 摄像头展示位置 -->
          <scanCodePage
            @addDataToList="addList"
            width="400px"
            height="400px"
          ></scanCodePage>
        </el-row>
        <el-row class="order_panel">
          <el-row class="order_text">
            <!-- 小计统计面板 -->
            <el-row class="e_row">
              <el-col :span="12">产品件数：</el-col>
              <el-col :span="12">{{ sum }}件</el-col>
            </el-row>
            <el-row class="e_row">
              <el-col :span="12">小计：</el-col>
              <el-col :span="12">￥{{ total_price }}元</el-col>
            </el-row>
          </el-row>
          <el-row>
            <div>
              <!-- 结算按钮 -->
              <el-button
                icon="el-icon-s-goods"
                @click="toOrder"
                class="order_btn"
                type="success"
                >下单结算</el-button
              >
              <el-button class="hidden" v-trigger>xx</el-button>
            </div>
          </el-row>
        </el-row>
      </el-aside>
    </el-container>
    <!-- 进入该页面提示音 -->
    <welcomeAudioTip
      :audiourl="welcomeAudioTipurl"
      ref="child"
    ></welcomeAudioTip>
  </div>
</template>
<script>
const childrenProps = {};
//引用视频扫描组件
import scanCodePage from "@/components/scanCodePage.vue";
import welcomeAudioTip from "@/components/welcomeAudioTip.vue";

export default {
  name: "orderList",
  components: {
    scanCodePage,
    welcomeAudioTip,
  },
  directives: {//自动触发交互
    trigger: {
      inserted(el, binging) {
        el.click()
      }
    }
  },
  data() {
    const item = {
      image: "@/img/img01.jpg",
      product_name: "冰红茶",
      product_price: "4",
      num: 1,
    };
    return {
      tableData: [],
      image: 'require("@/assets/img/img01.jpg")',
      item: {
        image: "@/img/img01.jpg",
        product_name: "冰红茶",
        product_price: "4",
        num: 1,
      },
      sum: 0, //商品总数
      total_price: 0, //商品总价
      welcomeAudioTipurl: require("@/assets/media/goinorder.mp3"), //初始化欢迎提示音
    };
  },
  mounted() {
    this.welcomeAudioTip();
  },
  methods: {        
    welcomeAudioTip() {
      this.welcomeAudioTipurl =  require("@/assets/media/goinorder.mp3");
      this.$refs.child.play();
    },
    toOrder() {      
      //下单操作    
      this.$router.push("./payment");
    },
    addList(data) {//通过子组件扫码获得商品信息，并加入到当前组件中
      //这里的data数据来自子组件
      //增加商品进入列表
      this.tableData.push(data);
      this.updataOrder(this.tableData);
    },
    updataOrder(data) {
      //更新订单产品数量和总价格
      this.sum = data.length;
      //循环变量tabelData数据的价格字段并进行计算汇总
      var price = 0;
      for (var i = 0; i < data.length; i++) {
        price = this.addFunction(price, data[i].product_price);
      }
      this.total_price = price;
    },
    addFunction(data1, data2) {
      // 加法
      let r1, r2, m;
      // 获取每个参数的小数的位数
      try {
        r1 = data1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = data2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      // 计算底数为10以最大小数位数为次幂的值
      m = Math.pow(10, Math.max(r1, r2));
      // 把所有参数转为整数后相加再除以次幂的值
      return (data1 * m + data2 * m) / m;
    },
    removeList(index, rows) {
      this.$confirm("确定删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rows.splice(index, 1);
          //只要对产品列表内数据进行操作，就要更新一次产品数量和小计
          this.updataOrder(this.tableData);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style type="css" scoped>
.e-container {
  height: 900px;
  border: 1px solid #eee;
}

.e-main {
  overflow: auto;
  overflow-y: scroll;
}

.e-container .el-header {
  background-color: #409EFF;
  color: #fff;
  line-height: 160px;
  font-size: 30px;
}

.el-aside {
  position: relative;
  color: #000;
}

.aside {
  position: relative;
  width: 400px;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
}
.order_panel {
  position: absolute;
  bottom: 0px;
}
.order_text {
  font-weight: 500;
  font-size: 30px;

  width: 400px;
}

.e_row {
  height: 100px;
}

.remove_btn {
  width: 150px;
  height: 60px;
}

.order_btn {
  width: 400px;
  height: 200px;
  font-size: 40px;
  color: #fff;
}

.hidden{
    display: none;
}
</style>